<template>
  <el-drawer
    v-model="pay_box"
    direction="rtl"
    size="40%"
    destroy-on-close
    :close-on-click-modal="false"
    @open="open"
    @close="EventBus.emit('close_pay_box')"
  >
    <template #title>
      <h4 v-if="form_data.payWay == 2">微信支付</h4>
      <h4 v-if="form_data.payWay == 3">支付宝支付</h4>
      <h4 v-if="form_data.payWay == 4">银行卡支付</h4>
    </template>
    <template #default>
      <div v-if="form_data.payWay != 4" class="tc">
        <div>
          应付金额：<span class="fs_20 fw" style="color: #3580eb"
            >￥{{ form_data.rechargeAmount }}</span
          >
        </div>
        <img
          src="@/assets/img/index.png"
          style="width: 200px; height: 200px; margin: 10px auto"
          alt=""
        />
        <div v-if="form_data.payWay == 2" class="flex_cc">
          <svgBtn
            icon="weixin"
            style="font-size: 24px; margin-right: 5px"
          ></svgBtn>
          微信支付
        </div>
        <div v-if="form_data.payWay == 3" class="flex_cc">
          <svgBtn
            icon="zhifubao"
            style="font-size: 24px; margin-right: 5px"
          ></svgBtn>
          支付宝支付
        </div>
        <el-form>
          <el-form-item label="交易单号">
            <el-input disabled v-model="pay_code"></el-input>
          </el-form-item>
          <el-form-item label="商户单号">
            <el-input disabled v-model="shopping_code"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-else style="border: 1px solid #ccc; padding: 10px 20px">
        <div class="flex_cc">
          第 {{ pay_form_index + 1 }} 笔 （共
          {{ pay_form_data.length }} 笔）<el-tooltip
            v-if="pay_form_index > 0"
            content="删除该笔"
            placement="bottom"
          >
            <svgBtn
              icon="table_delete"
              style="font-size: 20px"
              @click="
                pay_form_data.splice(pay_form_index, 1), (pay_form_index -= 1)
              "
            ></svgBtn>
          </el-tooltip>
        </div>
        <div class="flex_start" style="justify-content: center">
          <div
            class="pay_top_btn"
            v-show="pay_form_index > 0"
            @click="pay_form_index -= 1"
          >
            <svgBtn
              icon="prev"
              style="font-size: 12px; margin-right: 5px"
            ></svgBtn>
            上一笔
          </div>
          <div v-for="(item, index) in pay_form_data">
            <el-form
              :model="item"
              v-if="index == pay_form_index"
              label-width="100px"
              :rules="rules"
              style="width: 300px; margin: 0 40px"
            >
              <el-form-item label="支付水单号" prop="outTradeNo">
                <el-input
                  placeholder="请输入"
                  v-model="item.outTradeNo"
                  show-word-limit
                  maxlength="50"
                ></el-input>
              </el-form-item>
              <el-form-item label="支付金额" prop="totalFee">
                <el-input
                  placeholder="请输入"
                  v-model="item.totalFee"
                  show-word-limit
                  maxlength="9"
                ></el-input>
              </el-form-item>
              <el-form-item label="付款人">
                <el-input
                  placeholder="请输入"
                  v-model="item.payer"
                  show-word-limit
                  maxlength="30"
                ></el-input>
              </el-form-item>
              <el-form-item label="付款银行">
                <el-input
                  placeholder="请输入"
                  v-model="item.payBank"
                  show-word-limit
                  maxlength="30"
                ></el-input>
              </el-form-item>
              <el-form-item label="水单备注">
                <el-input
                  type="textarea"
                  resize="none"
                  placeholder="请输入"
                  v-model="item.payMessage"
                  show-word-limit
                  maxlength="300"
                ></el-input>
              </el-form-item>
              <el-form-item label="付款水单">
                <upload
                  :imageUrl="item.payPic"
                  :width="200"
                  :height="150"
                  :limit="1"
                  :uploadUrl="serviceApi.uploadSlip"
                  :downloadUrl="serviceApi.downloadSlip"
                  :accept="'image/jpeg,image/jpg,image/png'"
                  :fileNames="['付款水单']"
                ></upload>
              </el-form-item>
            </el-form>
          </div>
          <div class="pay_top_btn" @click="next_pay_form_data">
            <span v-if="pay_form_index == pay_form_data.length - 1"
              >加一笔</span
            >
            <span v-else>下一笔</span>
            <svgBtn
              icon="next"
              style="font-size: 12px; margin-left: 5px"
            ></svgBtn>
          </div>
        </div>
      </div>
      <div class="tr m_top10">
        <el-button @click="EventBus.emit('close_pay_box')">取消支付</el-button>
        <el-button
          type="primary"
          v-if="
            form_data.payWay == 4 && pay_form_index == pay_form_data.length - 1
          "
          @click="pay"
          :loading="btn_loading"
          >我已支付</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ref, toRefs } from 'vue'
import { ElForm, ElMessage } from 'element-plus'
import svgBtn from '@/components/svg_button.vue'
import upload from '@/view/components/upload.vue'
import EventBus from '@/utils/EventBus'
const rules = ref({
  outTradeNo: [
    { required: true, message: '请输入支付水单号', trigger: 'blur' },
  ],
  totalFee: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
})
const props = defineProps({
  form_data: Object,
  again_pay_form_data: Array,
  pay_box: Boolean,
})
const { pay_box, form_data } = toRefs(props) // 支付弹窗

console.log(props.again_pay_form_data)
const pay_code = ref('asdasdasd123') // 微信、支付宝 支付水单
const shopping_code = ref('asdasdasd123') // 微信、支付宝 商家单号
const pay_form_data_item = {
  // 银行卡支付 提交表单数据原
  outTradeNo: '',
  payBank: '',
  payMessage: '',
  payPic: [],
  payer: '',
  totalFee: '',
}
const pay_form_data = ref([])
const is_again_pay = ref(false)
const open = () => {
  console.log(123, props.again_pay_form_data)
  pay_form_index.value = 0
  // 充值支付
  if (props.again_pay_form_data.length == 0) {
    pay_form_data.value = [JSON.parse(JSON.stringify(pay_form_data_item))]
    is_again_pay.value = false
  } else {
    // 驳回 再次提交 支付
    pay_form_data.value = JSON.parse(JSON.stringify(props.again_pay_form_data))
    pay_form_data.value.forEach((item) => {
      item.payPic = item.payPic == '' ? [] : [item.payPic]
    })
    console.log(pay_form_data.value)
    is_again_pay.value = true
  }
}
const btn_loading = ref(false)
const pay_form_index = ref(0) // 银行卡支付 第几笔
const pay = () => {
  let flag = pay_form_data.value.some((item) => {
    return item.outTradeNo == ''
  })
  if (flag) {
    ElMessage.error('请输入每一笔的水单号!')
    return
  }
  var all_momey = 0
  pay_form_data.value.forEach((item) => {
    all_momey += parseFloat(item.totalFee)
  })
  console.log(all_momey, form_data.value)
  if (all_momey != parseFloat(form_data.value.rechargeAmount)) {
    ElMessage.error('支付金额与充值金额不一致！请仔细核对')
    return
  }
  if (btn_loading.value) return
  btn_loading.value = true
  if (is_again_pay.value) {
    pay_finish(form_data.value.rechargePackageId)
  } else {
    axios
      .request({
        url: serviceApi.rechargeOrder_create,
        method: 'post',
        data: form_data.value,
      })
      .then((res) => {
        console.log(res)
        pay_finish(res.data)
      })
      .catch((error) => {
        ElMessage.error(error)
        btn_loading.value = false
      })
  }
}
const pay_finish = (e) => {
  var data = {
    itemList: JSON.parse(JSON.stringify(pay_form_data.value)),
    id: e,
  }
  data.itemList.forEach((item) => {
    item.payWay = form_data.value.payWay
    ;(item.payPic as any) = item.payPic.toString()
  })
  console.log(data)
  axios
    .request({
      url: serviceApi.rechargeOrder_submit,
      method: 'post',
      data: data,
    })
    .then((res) => {
      console.log(res)
      EventBus.emit('close_pay_box')
      //   充值成功，清空原有数据
      pay_form_index.value = 0
      pay_form_data.value = [JSON.parse(JSON.stringify(pay_form_data_item))]
      form_data.value.rechargeAmount = ''
      form_data.value.remark = ''
      ElMessage.success('充值信息提交成功，请耐心等待管理员审核！')
      btn_loading.value = false
    })
    .catch((error) => {
      ElMessage.error(error)
      btn_loading.value = false
    })
}
const next_pay_form_data = () => {
  if (pay_form_index.value == pay_form_data.value.length - 1) {
    pay_form_data.value.push({
      outTradeNo: '',
      payBank: '',
      payMessage: '',
      payPic: [],
      payer: '',
      totalFee: '',
    })
  }
  pay_form_index.value += 1
}
</script>

<style lang="scss" scoped>
.pay_top_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 32px;
  background-color: #f0f2f5;
  border-radius: 2px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 12px;
}
</style>
